<script setup>
import {onMounted, provide, ref} from "vue";
import {getCurrentInstance} from 'vue';
import DeleteDialog from "@/components/WorkerDialog/deleteWorkerDialog.vue";
import AddDialog from "@/components/WorkerDialog/addWorkerDialog.vue";
import ModifyDialog from "@/components/WorkerDialog/modifyWorkerDialog.vue";

const {proxy} = getCurrentInstance();
const workers = ref([]);
const queryName = ref("");
const deleteId = ref(0);
const showDialog = ref(false);
const deleteUrl = ref("deleteWorker");
const createAddRef = ref(null) //引用addWorkerDialog子组件实例
const createModifyRef = ref(null) //引用createModifyRef子组件实例
const currentPage = ref(1);
const pageSize = ref(4);
const total = ref(0);
const workerInfo = ref(["", "", "", "", 0]);

provide('modifyDialog', workerInfo);

const addDialog = () => {
  createAddRef.value.open();
}

const modifyDialog = (scope) => {
  workerInfo.value[0] = workers.value[scope.$index].workerName;
  workerInfo.value[1] = workers.value[scope.$index].workerSalary;
  workerInfo.value[2] = workers.value[scope.$index].workerMoney;
  workerInfo.value[3] = workers.value[scope.$index].workerImage;
  workerInfo.value[4] = workers.value[scope.$index].id;
  provide('modifyDialog', workerInfo);
  createModifyRef.value.open();
}

onMounted(async () => {
  try {
    // 使用全局的 $axios 发起请求
    handleCurrentChange();
  } catch (error) {
    console.error(error);
  }
})

const query = async () => {
  try {
    // 使用全局的 $axios 发起请求
    workers.value = (await proxy.$axios.get('http://localhost:8091/TbWorker/getWorkerByName',
        {params: {name: queryName.value}})).data;
    queryName.value = "";
  } catch (error) {
    console.error(error);
  }
}

const deletePerson = (id) => {
  showDialog.value = true;
  deleteId.value = id;
}

const closeDialog = (val) => { //关于“删除”弹出窗口的关闭方法
  showDialog.value = val;
  handleCurrentChange();
}

const AddCloseDialog = (val) => { //关于“删除”弹出窗口的关闭方法
  handleCurrentChange();
}

const ModifyCloseDialog = (val) => { //关于“删除”弹出窗口的关闭方法
  handleCurrentChange();
}
const handleCurrentChange = () => {
  proxy.$axios.post("http://localhost:8091/TbWorker/listWorkersByPage",
      {
        pageSize: pageSize.value,
        pageNum: currentPage.value
      })
      .then(resp => {
        workers.value = resp.data.records;
        total.value = resp.data.total;
      })
      .catch(err => {
        console.log(`error = ${err}`);
      })
}
</script>

<template>
  <div id="container">
    <div id="header">
      <div>
        <el-button type="primary" @click="addDialog">添加</el-button>
      </div>
      <div>
        <span>送水工姓名</span>
        <el-input v-model="queryName"></el-input>
        <el-button type="primary" @click="query">搜索</el-button>
      </div>
    </div>
    <div id="body">
      <el-table :data="workers" border :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="workerName" label="送水工姓名"></el-table-column>
        <el-table-column prop="workerSalary" label="送水工薪水"></el-table-column>
        <el-table-column prop="workerMoney" label="元/桶"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="deletePerson(scope.row.id)" type="danger">
              删除
            </el-button>
            <el-button @click="modifyDialog(scope)" type="primary">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <DeleteDialog :showDialog="showDialog" :id="deleteId" :url="deleteUrl" @close="closeDialog"></DeleteDialog>
  <AddDialog ref="createAddRef" @close="AddCloseDialog"></AddDialog>
  <ModifyDialog ref="createModifyRef" @close="ModifyCloseDialog"></ModifyDialog>
</template>

<style scoped lang="scss">
#container {
  #header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2%;

    :deep(.el-input) {
      width: 50%;
      margin: 0 10px;
    }
  }
}
</style>